<template>
	<view class="delivery-info-box">
		<view class="top-content">
			<image :src="imagesUrl('delivery-item.png')" mode="widthFix" class="image" />
			<view class="top-middle">
				<view class="name">
					<text>
						中通快递
					</text>
					<text style="font-size: 24rpx;color: #FF7803;">
						运输中
					</text>
				</view>
				<view style="margin-top: 8rpx;">
					快递单号：<text class="blod">ZT1348332134651131</text>
					<!-- 复制图标 -->
					<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="28rpx" color="#333">
					</uni-icons>
				</view>
				<view style="margin-top: 6rpx;">
					官方电话：<text class="blod">18155636655</text>
					<uni-icons type="phone-filled" size="28rpx"></uni-icons>
				</view>
			</view>
		</view>

		<view style="height: 20rpx;background: #f8f8f8;"></view>

		<view class="delivery-detail public345">
			<view class="delivery-detail-item" v-for="(it,index) in 7" :key="index">
				<!-- 左侧小黑点 -->
				<view class="circle"></view>
				<view>
					<text class="info">快件已到达北京海淀援助运转中心快件已到达北京海淀援助运转中心</text>
					<text class="time">2023-02-10 16:10</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				imagesUrl: app.imagesUrl,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.delivery-info-box {
		width: 100vw;

		.top-content {
			display: flex;
			padding: 30rpx;

			.image {
				width: 116rpx;
				height: 116rpx;
				margin-right: 30rpx;
			}

			.top-middle {
				width: 540rpx;
				font-size: 24rpx;
				color: #999;

				.name {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}

				.blod {
					color: #333;
					margin-right: 8rpx;
				}
			}
		}

		.delivery-detail {

			padding-top: 34rpx;
			padding-bottom: 100rpx;

			.delivery-detail-item {
				position: relative;
				display: flex;
				padding-bottom: 30rpx;

				color: #999;
				font-size: 24rpx;
				box-sizing: border-box;

				&::before {
					position: absolute;
					top: 16rpx;
					left: 8rpx;
					transform: translateX(-50%);
					content: '';
					display: block;
					width: 1rpx;
					height: 100%;
					background: rgba(0, 0, 0, .1);
				}

				// 物流信息左侧点
				.circle {
					position: relative;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #D8D8D8;
					margin: 10rpx 0 0;
				}

				.info {
					display: block;
					width: 630rpx;
					margin-left: 30rpx;
					line-height: 40rpx;
				}

				.time {
					margin-left: 30rpx;
				}

				// 第一个点 #333
				&:first-child {
					.info {
						font-size: 26rpx;
						color: #333;
					}

					.circle {
						background: #333;
					}
				}

				// 最后一个点没有下划线
				&:last-child::before {
					height: 0;
				}
			}
		}
	}
</style>